<template>
	<view class="u-p-30 u-flex" v-if="false">
		<view class="u-flex-1">
			<u-icon name="map" color="#303133" size="28" label="当前城市："></u-icon>
			<text class="color-primary">{{location.city_name}}</text>
		</view>
		<!-- <view class="" @click="getLocation">
			<u-icon name="reload" color="#303133" size="28" label="重新定位"></u-icon>
		</view> -->
		<button open-type="openSetting" class="u-reset-button" @opensetting="openSetting">
			<view class="">
				<u-icon name="reload" color="#303133" size="28" label="重新定位"></u-icon>
			</view>
		</button>
	</view>
	
	<view class="bgw">
		<view class="u-p-l-28 u-p-r-28 u-p-t-18 u-p-b-18 u-flex">
			<view class="u-p-10 u-tips-color">
				热门城市：
			</view>
			<view class="u-flex-1 u-flex" style="flex-wrap: wrap;">	
				<template v-for="v in hotCitys">
					<view class="u-p-10" @click="clickCity(v,v.pItem)">
						{{v.label}}
					</view>
				</template>
			</view>
		</view>	
	</view>
	<u-gap height="30"></u-gap>
	<view class="bgw" v-for="item in citys">
		<view class="u-p-l-28 u-p-r-28 u-p-t-18 u-p-b-18 u-border-bottom">
			<view class="u-flex u-col-top">
				<view class="u-p-10 u-text-right u-tips-color" style="width: 140rpx;">
					{{item.label}}：
				</view>
				<view class="u-flex-1 u-flex" style="flex-wrap: wrap;">
					<template v-for="v in item.children">
						<view class="u-p-10" @click="clickCity(v,item)">
							{{v.label}}
						</view>
					</template>
				</view>
			</view>			
		</view>		
	</view>
</template>

<script setup>
	import cityData from '@/common/js/cityData.js'; //需要引入store
	import store from '@/store/index.js';
	import {
		ref,
		reactive,
		computed,
		onMounted,
		getCurrentInstance,
		watch
	} from 'vue'
	import {
		onReady,
		onLoad,
		onShow,
		onPageScroll
	} from '@dcloudio/uni-app'
	const { proxy } = getCurrentInstance()
	const {
		nav,
		navLogin,
		modal,
		toastNavBack
	} = proxy.$util;
	import mixins from '@/common/js/mixins.js';
	const {
		navigationBarTitle
	} = mixins();
	
	// const appAuthorizeSetting = uni.getAppAuthorizeSetting()
	// console.log(appAuthorizeSetting);
	const openSetting = (res) =>{
		// console.log(res);
		// console.log(uni.getAppAuthorizeSetting());
		if(res.detail.authSetting['scope.userLocation']){
			store.dispatch('getLocation')
		}else{
			uni.$u.toast('定位失败');
		}
	}
	
	const location = computed(() => store.state.$location)
	// const citys = computed(() => store.state.$citys)
	const citys = cityData
	
	const getLocation = () =>{
		store.dispatch('getLocation')
	}
	const hotCitys = computed(() => {
		return [{
			value:530100,
			label:'昆明',
			pItem:{
				value:530000,
				label:'云南',
			}
		}]
	})
	const clickCity = (v,p) =>{
		console.log(v);
		modal('确定切换城市为：'+v.label).then(() => {
			store.commit('set_location', {
				city_code: v.value,
				city_name: v.label,
				province_code: p.value,
				province_name: p.label,
				longitude:'',
				latitude:'',
				district_code:'',
				district_name:'',
			})
			toastNavBack('切换城市成功')
			// uni.$u.toast('切换城市成功');
		})
		
	}
	onLoad(()=>{
		// store.dispatch('getSelectChinaCity')
	})
</script>

<style>

</style>
